<template>
  <view class="checkin-form">
    <view class="form-title">入住信息</view>
    
    <!-- 住客姓名 -->
    <view class="form-item">
      <view class="item-label">
        <text>住客姓名</text>
        <text class="info-icon">ⓘ</text>
      </view>
      <view class="item-input">
        <input type="text" placeholder="请填写住客姓名" placeholder-style="color: #ccc;" v-model="formData.name" />
        <view class="avatar-circle">
          <text class="iconfont icon-ziyuanldpi"></text>
        </view>
      </view>
    </view>
    
    <!-- 身份证 -->
    <view class="form-item">
      <view class="item-label">
        <text>身份证</text>
        <text class="arrow-icon">▼</text>
      </view>
      <view class="item-input">
        <input type="idcard" placeholder="请填写证件号码" placeholder-style="color: #ccc;" v-model="formData.idCard" />
      </view>
    </view>
    
    <!-- 联系电话 -->
    <view class="form-item">
      <view class="item-label">联系电话</view>
      <view class="item-input phone-input">
        <view class="country-code">+86 <text class="arrow-icon">▼</text></view>
        <input type="number" placeholder="请填写联系电话" placeholder-style="color: #ccc;" v-model="formData.phone" />
        <view class="phone-circle">
          <text class="iconfont icon-dianhua"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'houseCheckinForm',
  props: {
    // 表单数据
    formValue: {
      type: Object,
      default: () => ({
        name: '',
        idCard: '',
        phone: ''
      })
    }
  },
  data() {
    return {
      formData: this.formValue
    }
  },
  watch: {
    formData: {
      handler(newVal) {
        this.$emit('update:formValue', newVal);
        this.$emit('form-change', newVal);
      },
      deep: true
    },
    formValue: {
      handler(newVal) {
        this.formData = newVal;
      },
      deep: true
    }
  },
  methods: {
    // 验证表单
    validate() {
      if (!this.formData.name) {
        uni.showToast({
          title: '请填写住客姓名',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.idCard) {
        uni.showToast({
          title: '请填写证件号码',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.phone) {
        uni.showToast({
          title: '请填写联系电话',
          icon: 'none'
        });
        return false;
      }
      
      return true;
    }
  }
}
</script>
<!-- // +----------------------------------------------------------------------
// | panweidongAI编程开发者  
// +----------------------------------------------------------------------
// | 联系379247101@qq.com   公司：AI技术部
// +----------------------------------------------------------------------
// | Author: panweidong <379247101@qq.com>
// +---------------------------------------------------------------------- -->

<style lang="scss" scoped>
/* 入住信息表单 */
.checkin-form {
  margin: 20rpx;
  background-color: white;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  
  .form-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }
  
  .form-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    .item-label {
      display: flex;
      align-items: center;
      color: #333;
      font-size: 28rpx;
      
      .info-icon, .arrow-icon {
        color: #999;
        margin-left: 10rpx;
        font-size: 24rpx;
      }
    }
    
    .item-input {
      display: flex;
      align-items: center;
      
      input {
        text-align: right;
        font-size: 28rpx;
        color: #333;
        width: 300rpx;
      }
      
      .avatar-circle, .phone-circle {
        margin-left: 16rpx;
        width: 46rpx;
        height: 46rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f0f0f0;
        border-radius: 50%;
        
        text {
          font-size: 28rpx;
          color: #999;
        }
      }
    }
    
    .phone-input {
      display: flex;
      align-items: center;
      
      .country-code {
        display: flex;
        align-items: center;
        margin-right: 10rpx;
        color: #333;
        font-size: 28rpx;
        
        .arrow-icon {
          margin-left: 5rpx;
          font-size: 20rpx;
          color: #999;
        }
      }
    }
  }
}
</style> 